<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>HOSPITAL</title>
    <script src="../static/js/jQuery.min.js" charset="utf-8"></script>
    <script src="../static/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../static/vue/vue.min.js"></script>
    <script src="../static/vue/vue-tables-2.min.js"></script>


    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style media="screen">
      .margin-top-5{margin-top: 5px;}
      .padding-side-100{padding-left: 100px;padding-right: 100px;}
    </style>

  </head>
  <body>
    <div class="container-fluid" id="master-page">

      <!-- main view -->
      <div class="row text-center">
        <h1>医院节点 - 发布处方</h1>
      </div>
      <div class="row margin-top-5 padding-side-100">
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>hospital - 医院节点ID:: </span>
          </div>
          <div class="col-xs-3">
            <span><input type="text" class="form-control" v-model="new_data.hospital" placeholder="hid1,hid2...10:: 0x00......" :disabled="true"></input></span>
          </div>
          <div class="col-xs-3">
              <span>{{map.hospital[new_data.hospital]}}</span>
          </div>
        </div>
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>patient - 病人ID:: </span>
          </div>
          <div class="col-xs-3">
            <span><input type="text" class="form-control" v-model="new_data.patient" placeholder="pid:: 0x01......"></input></span>
          </div>
          <div class="col-xs-3">
          <span>{{map.patient[new_data.patient]}}</span>
          </div>
        </div>
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>doctor - 医生ID:: </span>
          </div>
          <div class="col-xs-6">
            <span><input type="text" class="form-control" v-model="new_data.doctor" placeholder="did:: 0x02......"></input></span>
          </div>
        </div>
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>diagnose - 诊断:: </span>
          </div>
          <div class="col-xs-6">
            <span><input type="text" class="form-control" v-model="new_data.diagnose" placeholder="freetext"></input></span>
          </div>
        </div>
        <!-- <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>prescription ID:: </span>
          </div>
          <div class="col-xs-6">
            <span><input type="text" class="form-control" v-model="new_data.prescription_ID" placeholder="generate automated"></input></span>
          </div>
        </div>
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>policy:: </span>
          </div>
          <div class="col-xs-6">
            <span><input type="text" class="form-control" v-model="new_data.policy" placeholder="xx"></input></span>
          </div>
        </div> -->
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>prescription content - 处方内容:: </span>
          </div>
          <div class="col-xs-6">
            <span><button class="btn btn-sm btn-success btn-block" @click="addDrug('call')"><span class="glyphicon glyphicon-plus"></span></button></span>
          </div>
          <div class="col-xs-12 margin-top-5">
            <div class="col-xs-3 margin-top-5" v-for="(v, k) in new_data.prescription_content"><button class="btn btn-warning btn-md btn-block">{{chemistry[v.chemistry_name]}} {{v.chemistry_name}} <span class="badge">{{v.amount}}</span></button></div>
          </div>
        </div>
      </div>

      <div class="row margin-top-5 padding-side-100">
        <div class="col-md-12">
          <el-button
            type="primary"
            @click="publish()"
            v-loading.fullscreen.lock="busy">
            publish
          </el-button>
          <!-- <button 
          class="btn btn-info btn-block btn-lg" 
          @click="publish()" 
          v-show="!busy"
          v-loading.fullscreen.lock="fullscreenLoading"
          >publish</button>
          <button class="btn btn-info btn-block btn-lg" @click="publish()" v-show="busy">publish</button> -->
        </div>
      </div>

      <!-- modal -->
      <div class="modal fade" tabindex="-1" role="dialog" id="Add_Drug_Modal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Add Drug - 添加药品</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-6 margin-top-5">
                  <select class="form-control" v-model="new_drug.name">
                      <option :value="k" v-for="(v,k) in chemistry">{{v}} - {{k}}</option>
                  </select>
                  <!-- <input type="text" class="form-control" v-model="new_drug.name" placeholder="drug name"> -->
                  <!-- <input type="text" class="form-control" v-model="new_drug.name" placeholder="drug name"> -->
                </div>
                <div class="col-md-6 margin-top-5">
                  <input type="number" class="form-control" v-model="new_drug.qty" placeholder="drug quantity">
                </div>
                <div class="col-md-6 margin-top-5" v-show="false">
                  <input type="text" class="form-control" v-model="new_drug.remark" placeholder="remark">
                </div>
                <div class="col-md-6 margin-top-5" v-show="false">
                  <input type="text" class="form-control" v-model="new_drug.usage" placeholder="drug usage">
                </div>
              </div>
            </div>
            <div class="modal-footer margin-top-5">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" @click="addDrug()" :disabled="new_drug.name==''||new_drug.qty<1">Finish</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
    </div>

  </body>

  <!-- map for  chinese name -->
  <script src="../static/info/map.js" charset="utf-8"></script>
  <!-- vue -->
  <script>
  // var ServerIP = window.location.host
  var ServerIP = "localhost:"+window.location.port

  Vue.use(VueTables.ClientTable);
  var app = new Vue({
  	el: '#master-page',
  	data: function(){
  		return {
        chemistry: chemistry,
  			edit_flag: false,
        new_data:{
          hospital:"hid1",
          patient:"patientid1",
          doctor:"did1",
          diagnose:"fever",
          time:"",
          prescription_ID:"",
          prescription_content:[],
        },
        new_drug:{
          name:"",
          qty: 1,
          remark: "",
          usage: "",
        },
        busy: false,
        map: {
            medicine:   medicine,
            hospital:   hospital,
            chemistry:  chemistry,
            store:      store,
            patient:    patient,
        },
  		}
  	},
  	methods: {
  		func: function(){
  			var _this = this;
  			var postData = {};
  			postData["receiver"] = 999;
  			console.log(postData)
  			$.post("...",postData,function(data,status){
  				if (status=="success") {
  					console.log(data)
  				}else{alert("Error!Code: "+status);}
  			});
  			return;
  		},
  		addDrug: function(aux){
        if (aux=="call") {
          this.new_drug = this.blankDrug()
          $("#Add_Drug_Modal").modal("show"); return;
        }
        var tmp = {}
        tmp.chemistry_name = this.new_drug.name
        tmp.amount = parseInt(this.new_drug.qty)

        this.new_data.prescription_content.push(tmp)

        $("#Add_Drug_Modal").modal("hide"); return;
  		},
  		getDrugList: function(){
        return 0
  		},
  		getOneDrugInfo: function(){
        return 0
  		},
  		getHospitalList: function(){
        return 0
  		},
  		generatePrescriptionID: function(){
        return 0
  		},
  		publish: function(){
        let _this = this
        _this.busy = true
        var postData = {
            "hospital_id":this.new_data.hospital,
            "patient_id":this.new_data.patient,
            "ts":(new Date()).getTime(),
            "doctor_id":this.new_data.doctor,
            "disease":this.new_data.diagnose,
            "chemistrys":this.new_data.prescription_content,
            "policy":"hid1 OR (Cid AND Rid1)",
        }
        console.log(postData);

        $.ajax({
          type: 'POST',
          url: "http://" + ServerIP + "/hospitalsendprescription",
          data: JSON.stringify(postData),
          success: function(result){
            console.log(result);
            _this.busy = false
            alert("success")
              location.reload()
            //code:: notice hospital the result.
          },
          dataType: "json"
        });
        return 0
  		},
      // util functions
      blankDrug: function(){
        return {
          name:"",
          qty: 1,
          remark: "",
          usage: "",
        }
      },
  	},
  	computed: {
  	},
  	created(){
  		// this.fetch_person_info();
  		// this.fetch_history_record();
  	}
  });
  </script>
</html>
